<template>
    <div class="user-list">

        <!-- 搜索 -->
        <div class="search-box">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchForm.name" placeholder="类别" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searInfo">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 添加 -->
        <div class="add-box">
            <el-button type="primary" v-if="roleId != 3" @click="addDialogVisible = true">添加</el-button>
            <el-dialog title="添加信息" @close="closeAddBtn" :visible.sync="addDialogVisible" :close-on-click-modal="false" :close-on-press-escape="false">
                <el-form :model="addForm" label-width="80px" ref="addForm">

                    <el-form-item label="类别" prop="name">
                        <el-input v-model="addForm.name" autocomplete="off" clearable></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addInfo">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <!-- 编辑 -->
        <div class="edit-box">
            <el-dialog title="编辑信息" :visible.sync="editDialogVisible">
                <el-form :model="editForm" label-width="80px">
                    <el-form-item label="角色">
                        <el-input v-model="editForm.name" autocomplete="off" clearable></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editInfo">确 定</el-button>
                </div>
            </el-dialog>
        </div>


        <!-- 表格： -->
        <el-table v-loading="loading" element-loading-spinner="el-icon-loading" :data="tableData" :header-cell-style="{height: '40px',background:'#f5f7fa',color:'#606266'}">
            <el-table-column prop="name" label="类别" width=""></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width=""></el-table-column>
            <el-table-column label="操作" width="160" v-if="roleId != 3">
                <template slot-scope="scope">
                    <el-button type="text"  @click="delBtn(scope.row)">删除</el-button>
                    <el-button type="text"  @click="editBtn(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div class="pagination">
            <div class="block">
                <el-pagination @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="totalRecord"></el-pagination>
            </div>
        </div>
    </div>
</template>



<script>
import { mapGetters } from 'vuex'
import { cateList, delCate, addCate, updateCate } from '@/api/category'


export default {
    computed: {
        ...mapGetters([
            'role'
        ]),
    },
    methods: {
        // 获取信息api
        getList(params) {
            this.loading = true;
            let objParams = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ...params,
                ...this.searchForm
            }

            cateList(objParams).then(res => {
                this.loading = false;
                const { list, total } = res.data
                this.totalRecord = total;
                this.tableData = list;
            }).catch(error => {
                reject(error)
            })
        },
        // 删除api
        delInfo(id){
            console.log(id)
            delCate({id: id}).then(res => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.getList({})
            }).catch(error => {
                reject(error)
            })  
        },
        // 添加api
        addInfo(){
            addCate({...this.addForm}).then(res => {
                this.getList({})
                this.addDialogVisible = false
            }).catch(error => {
                reject(error)
            })  
        },
        // 编辑api
        editInfo(){
            updateCate({...this.editForm}).then(res => {
                this.getList({})
                this.editDialogVisible = false
            }).catch(error => {
                reject(error)
            })  
        },

        //分页
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getList({});
        },
        //查询
        searInfo() {
            this.getList({});
        },
        closeAddBtn(){
            this.$refs['addForm'].resetFields();
        },
        delBtn(row) {
            let vm = this
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                vm.delInfo(row.id)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        editBtn(row) {
            this.editDialogVisible = true;
            this.editForm = {...row}
        },

    },
    created() {
        this.getList()
        this.roleId = this.$store.state.user.roleId
    },
    data() {
        return {
            roleId: 0,
            loading: false,
            tableData: [],
            totalRecord: null,
            pageNum: 1,
            pageSize: 10,
            RoleData: [],
            searchForm: {
                name: '',
            },
            addDialogVisible: false,
            editDialogVisible: false,
            addForm: {
                name: '',
            },
            editForm: {
                name: '',
            },
        }
    }
}
</script>



<style  lang="scss" scoped>
.user-list {
    margin: 10px 30px;

    .add-box {
        margin-top: -10px;
        margin-bottom: 10px;
    }

    /**分页*/
    .pagination {
        text-align: right;
        min-width: 400px;
        background: #fff;
    }

    .el-pagination {
        padding: 10px !important;
    }


}
</style>




